// utils/tech-theme.js
// Tech-focused color palette and design constants

const TechTheme = {
  // Primary Colors - Tech focused
  colors: {
    // Main brand colors
    primary: '#00D4FF',        // Electric blue/cyan - tech accent
    primaryDark: '#0099CC',    // Darker blue for depth
    primaryLight: '#33DDFF',   // Lighter blue for highlights
    
    // Secondary colors
    secondary: '#7B68EE',      // Medium slate blue - tech purple
    accent: '#00FF88',         // Neon green - success/active states
    warning: '#FFB800',        // Amber - warnings
    error: '#FF3366',          // Red - errors
    
    // Background colors - Dark theme focused
    bgPrimary: '#0A0A0A',      // Deep black
    bgSecondary: '#1A1A1A',    // Dark grey
    bgTertiary: '#2A2A2A',     // Medium dark grey
    bgCard: '#1E1E1E',         // Card background
    bgOverlay: 'rgba(0, 0, 0, 0.8)', // Modal overlays
    
    // Text colors
    textPrimary: '#FFFFFF',    // Primary white text
    textSecondary: '#B0B0B0',  // Secondary grey text
    textTertiary: '#808080',   // Tertiary grey text
    textMuted: '#606060',      // Muted text
    textInverse: '#000000',    // Inverse text (on light bg)
    
    // Border and divider colors
    border: '#333333',         // Default border
    borderLight: '#444444',    // Light border
    divider: '#2A2A2A',       // Dividers
    
    // Status colors
    online: '#00FF88',         // Online status
    offline: '#808080',        // Offline status
    
    // Gradient backgrounds
    gradientPrimary: 'linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%)',
    gradientCard: 'linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 100%)',
    gradientAccent: 'linear-gradient(135deg, #00D4FF 0%, #7B68EE 100%)',
    gradientSuccess: 'linear-gradient(135deg, #00FF88 0%, #00D4FF 100%)',
  },
  
  // Spacing and dimensions
  spacing: {
    xs: '8rpx',
    sm: '16rpx',
    md: '24rpx',
    lg: '32rpx',
    xl: '48rpx',
    xxl: '64rpx',
  },
  
  // Border radius
  borderRadius: {
    sm: '4rpx',
    md: '8rpx',
    lg: '12rpx',
    xl: '16rpx',
    xxl: '24rpx',
    full: '50%',
  },
  
  // Shadows - Subtle for tech aesthetic
  shadows: {
    sm: '0 2rpx 8rpx rgba(0, 212, 255, 0.1)',
    md: '0 4rpx 16rpx rgba(0, 212, 255, 0.15)',
    lg: '0 8rpx 24rpx rgba(0, 212, 255, 0.2)',
    glow: '0 0 20rpx rgba(0, 212, 255, 0.3)',
    cardHover: '0 8rpx 32rpx rgba(0, 212, 255, 0.25)',
  },
  
  // Typography
  typography: {
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto"',
    fontSize: {
      xs: '20rpx',
      sm: '24rpx',
      md: '28rpx',
      lg: '32rpx',
      xl: '36rpx',
      xxl: '42rpx',
      xxxl: '48rpx',
    },
    fontWeight: {
      light: 300,
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
    },
    lineHeight: {
      tight: 1.2,
      normal: 1.5,
      relaxed: 1.6,
    },
  },
  
  // Animation and transitions
  animations: {
    duration: {
      fast: '150ms',
      normal: '300ms',
      slow: '500ms',
    },
    easing: {
      easeOut: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
      easeIn: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
      easeInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
    },
  },
  
  // Tech-specific UI elements
  tech: {
    // Neon glow effects
    neonGlow: {
      primary: '0 0 10rpx #00D4FF, 0 0 20rpx #00D4FF, 0 0 30rpx #00D4FF',
      accent: '0 0 10rpx #00FF88, 0 0 20rpx #00FF88, 0 0 30rpx #00FF88',
      purple: '0 0 10rpx #7B68EE, 0 0 20rpx #7B68EE, 0 0 30rpx #7B68EE',
    },
    
    // Glassmorphism effects
    glass: {
      background: 'rgba(255, 255, 255, 0.05)',
      border: '1rpx solid rgba(255, 255, 255, 0.1)',
      backdrop: 'blur(20rpx)',
    },
    
    // Holographic/iridescent effects
    holographic: 'linear-gradient(45deg, #00D4FF, #7B68EE, #00FF88, #00D4FF)',
    
    // Circuit board patterns (for backgrounds)
    circuitPattern: 'url("data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cpath d="M20 20h20v20H20V20zm0-20h20v20H20V0z" stroke="%23333" stroke-width="0.5" opacity="0.1"/%3E%3C/g%3E%3C/svg%3E")',
  },
  
  // Component-specific styles
  components: {
    button: {
      height: '88rpx',
      borderRadius: '12rpx',
      fontSize: '28rpx',
      fontWeight: 500,
    },
    card: {
      borderRadius: '16rpx',
      padding: '32rpx',
      background: 'linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 100%)',
    },
    input: {
      height: '80rpx',
      borderRadius: '8rpx',
      fontSize: '28rpx',
      padding: '0 24rpx',
    },
    avatar: {
      borderRadius: '50%',
      border: '2rpx solid #333333',
    },
  },
}

module.exports = TechTheme